<template>
    <view class="container" v-if="isLoaded">
      <u-empty v-if="list == null || list.length == 0" />
      <view style="padding-bottom: 90px">
        <view
          v-for="(item, index) in list"
          :key="item.id"
          style="display: flex; padding: 20rpx 0"
        >
          <view style="flex: 1">
            {{ item.name }}
          </view>
          <button
            @click="btnEditClick(item)"
            size="mini"
            style="background-color: #f3c45d; color: #fff; margin-right: 10rpx"
          >
            编辑
          </button>
          <button
            @click="btnDelClick(item.id)"
            size="mini"
            style="background-color: #f56c6c; color: #fff"
          >
            删除
          </button>
        </view>
        <!-- 加载更多 -->
        <li-loadmore
          :status="loadStatus"
          :loading-text="loadingText"
          :loadmore-text="loadmoreText"
          :nomore-text="nomoreText"
          @loadmore="onReachBottomEvent"
          line
        />
      </view>
  
      <u-popup
        :show="show"
        @close="close"
        @open="open"
        mode="center"
        :closeable="true"
      >
        <view style="margin: 30rpx">
          <view
            style="text-align: center; font-weight: bold; padding-bottom: 30rpx"
          >
            {{ type == "add" ? "添加做法分组" : "编辑做法分组" }}
          </view>
          <uni-forms ref="form" :modelValue="form">
            <uni-forms-item class="form-item" label="分组名称" name="name">
              <view class="lbl">分组名称:</view>
              <uni-easyinput
                class="form-item-right"
                type="text"
                v-model="form.name"
              />
            </uni-forms-item>
          </uni-forms>
        </view>
        <button
          size="mini"
          @click="btnAddClick"
          style="
            text-align: center;
            height: 60px;
            line-height: 60px;
            font-size: 18px;
            width: 100%;
            background-color: #f3c45d;
            color: #fff;
            border-radius: 0;
          "
        >
          {{ type == "add" ? "添加" : "编辑" }}
        </button>
      </u-popup>
      <view
        class="bottom-add"
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          height: 50px;
          background-color: #f3c45d;
          color: #fff;
          font-size: 18px;
          font-weight: bold;
        "
        @click="fabClick"
      >
        新建做法分组
      </view>
    </view>
  </template>
  
  <script>
  import { corpId, storeId } from "../../../constants/apiConstants";
  import { toastIconEnum } from "../../../constants/uiConstants";
  import {
    umodal,
    utoast,
    uShowLoading,
    uHideLoading,
  } from "../../../utils/uniUtils";
  
  export default {
    data() {
      return {
        pattern: {
          buttonColor: "#F3C45D",
        },
        loadStatus: "loadmore",
        loadingText: "努力加载中。。。",
        loadmoreText: "上拉加载更多~~",
        nomoreText: "已全部加载~~",
        show: false, // 是否显示弹窗
        type: "add", //弹窗类型  1.add 添加  2.edit  编辑
        form: {
          //  表单
          id: 999999999,
          corpId: corpId,
          storeId: storeId,
          name: "",
          isDelete: false,
          createTime: "2999-12-31 14:52:26",
          modifyTime: 0,
        },
        isLoaded: false, //  控制页面是否显示
  
        /* 分页数据区域 */
        pageNum: 1,
        pageSize: 10,
        total: 0,
        showLoadMore: false,
  
        list: [], // 数据源
      };
    },
  
    async mounted() {
      try {
        await this.GetPageList();
      } catch (error) {
        console.log("err-->", error);
      } finally {
        uHideLoading();
        this.isLoaded = true;
      }
    },
    onReachBottom() {
      this.onReachBottomEvent();
    },
  
    methods: {
      /**
       * 触底事件
       */
      onReachBottomEvent() {
        console.log("onReachBottom");
        // 拉新数据再拼接
        if (this.list.length < this.total) {
          this.showLoadMore = true;
          setTimeout(async () => {
            uShowLoading();
            if (this.showLoadMore) {
              this.pageNum += 1;
            }
            this.loadStatus = "loading";
            await this.GetPageList();
            uHideLoading();
          }, 300);
        } else {
          // utoast("没有更多数据了!", toastIconEnum.error);
          return;
        }
      },
  
      /**
       * 添加按钮添加事件
       */
      fabClick() {
        this.type = "add";
        this.form.name = "";
        this.form.isDelete = false;
        this.form.modifyTime = 0;
        this.form.createTime = "2999-12-31 14:52:26";
        this.show = true;
      },
      open() {
        this.show = true;
        // console.log('open');
      },
      close() {
        this.show = false;
        // console.log('close');
      },
      /**
       * 添加按钮点击事件
       */
      async btnAddClick() {
        this.form.name = this.form.name.trim();
        if (this.form.name.length == 0) {
          await utoast("名称不能为空！", toastIconEnum.error);
          return;
        }
        switch (this.type) {
          case "add": {
            const res = await this.AddFoodTaskCategory();
            console.log(res.code == 0, "<--res");
            if (res.code == 1) {
              await utoast(res.msg, toastIconEnum.error);
              return;
            }
            if (res.code == 0) {
              console.log("添加成功！");
              await utoast();
              this.show = false;
              this.form.name = "";
              await this.GetPageList();
            }
            break;
          }
          case "edit": {
            const res = await this.EditFoodTaskCategory(this.form);
            console.log(res.code == 0, "<--res");
            if (res.code == 1) {
              await utoast(res.msg, toastIconEnum.error);
              return;
            }
            if (res.code == 0) {
              console.log("修改成功！");
              await utoast();
              this.show = false;
              this.form.name = "";
              await this.GetPageList();
            }
  
            break;
          }
          default: {
            break;
          }
        }
      },
      /**
       *  添加做法分组
       */
      AddFoodTaskCategory() {
        return this.$api.AddFoodTaskCategory(this.form);
      },
      /**
       * 删除按钮点击事件
       */
      async btnDelClick(id) {
        if (await umodal()) {
          const res = await this.DelFoodTaskCategory({ id });
          if (res.code == 0) {
            await utoast(res.msg);
            this.$nextTick(async function () {
              await this.GetPageList();
            });
          } else {
            await utoast(res.msg);
          }
        }
      },
      async btnEditClick(item) {
        this.form = JSON.parse(JSON.stringify(item));
        this.type = "edit";
        this.show = true;
      },
      /**
       * 编辑做法分类
       * @returns {Promise<void>}
       * @constructor
       */
      async EditFoodTaskCategory() {
        return await this.$api.EditFoodTaskCategory(this.form);
      },
      /** 删除做法分类
       * @param {Object} FMLongId  实体
       */
      async DelFoodTaskCategory(FMLongId) {
        return await this.$api.DelFoodTaskCategory(FMLongId);
      },
      /**
       * 获取做法分类
       */
      async GetPageList() {
        let {
          data: { list, total },
        } = await this.$api.GetFoodTaskCategory({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        });
        console.log("list-->", list);
        this.list = [...this.list, ...list];
        this.total = total;
        if (this.list.length == this.total) {
          this.loadStatus = "nomore";
        } else {
          this.loadStatus = "loadmore";
        }
        this.showLoadMore = false;
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .container {
    padding: 0 50rpx;
    height: 100.1vh;
  
    .form-item {
      display: flex;
      align-items: center;
      padding: 14rpx 0;
  
      .lbl {
        width: 80px;
        font-size: 14px;
      }
  
      .form-item-right {
        flex: 1;
      }
    }
  }
  </style>
  